今天是第三天我們可以寫一個javascript網頁程式管理公路車倉儲系統，以下是程式碼
當然可以！這是一個簡單的公路車倉儲系統的網頁應用程式範例，使用了HTML、CSS和JavaScript來實現。此系統允許用戶查看、添加、編輯和刪除倉儲中的公路車。
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公路車倉儲系統</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>公路車倉儲系統</h1>
<div id="app">
<h2>倉儲中的公路車</h2>
<ul id="bike-list"></ul>
<h2>添加新公路車</h2>
<form id="bike-form">
<label for="bike-name">車型名稱:</label>
<input type="text" id="bike-name" required>
<label for="bike-brand">品牌:</label>
<input type="text" id="bike-brand" required>
<label for="bike-year">年份:</label>
<input type="number" id="bike-year" required>
<button type="submit">添加公路車</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
style.cssbody {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#app {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1, h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
label, input, button {
margin-bottom: 10px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
app.jsdocument.addEventListener('DOMContentLoaded', () => {
const bikeList = document.getElementById('bike-list');
const bikeForm = document.getElementById('bike-form');
let bikes = [];
function renderBikes() {
bikeList.innerHTML = '';
bikes.forEach((bike, index) => {
const li = document.createElement('li');
li.textContent = `${bike.name} (${bike.brand} - ${bike.year})`;
const editButton = document.createElement('button');
editButton.textContent = '編輯';
editButton.onclick = () => editBike(index);
const deleteButton = document.createElement('button');
deleteButton.textContent = '刪除';
deleteButton.onclick = () => deleteBike(index);
li.appendChild(editButton);
li.appendChild(deleteButton);
bikeList.appendChild(li);
});
}
function addBike(name, brand, year) {
bikes.push({ name, brand, year });
renderBikes();
}
function editBike(index) {
const bike = bikes[index];
const newName = prompt('修改車型名稱:', bike.name);
const newBrand = prompt('修改品牌:', bike.brand);
const newYear = prompt('修改年份:', bike.year);
if (newName && newBrand && newYear) {
bikes[index] = { name: newName, brand: newBrand, year: newYear };
renderBikes();
}
}
function deleteBike(index) {
bikes.splice(index, 1);
renderBikes();
}
bikeForm.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('bike-name').value;
const brand = document.getElementById('bike-brand').value;
const year = document.getElementById('bike-year').value;
addBike(name, brand, year);
bikeForm.reset();
});
renderBikes();
});
index.html: 此檔案包含了網頁的結構，使用表單讓用戶可以添加公路車，並顯示已添加的公路車列表。
style.css: 此檔案提供了簡單的樣式，使得網頁更加美觀。
app.js: 此檔案包含了JavaScript邏輯，用於處理公路車的添加、編輯和刪除功能。
我下面會以javascript來做解釋
當然可以！讓我們來深入解析這個JavaScript程式的各個部分。
document.addEventListener('DOMContentLoaded', () => {
這行程式碼使用了 DOMContentLoaded 事件，這個事件會在HTML文件完全加載和解析完成後觸發，而不必等待圖片或樣式表等外部資源。這樣可以確保當我們操作DOM（文檔物件模型）時，網頁結構已經準備好。
const bikeList = document.getElementById('bike-list');
const bikeForm = document.getElementById('bike-form');
我們使用 document.getElementById() 方法來選取HTML元素。這裡，我們選取了顯示公路車列表的 <ul> 元素 (bikeList) 和用於添加新公路車的 <form> 元素 (bikeForm)。
let bikes = [];
我們定義了一個空陣列 bikes 來儲存所有的公路車資料。每個公路車都是一個物件，包含 name（車型名稱）、brand（品牌）和 year（年份）這三個屬性。
function renderBikes() {
bikeList.innerHTML = '';
bikes.forEach((bike, index) => {
const li = document.createElement('li');
li.textContent = `${bike.name} (${bike.brand} - ${bike.year})`;
const editButton = document.createElement('button');
editButton.textContent = '編輯';
editButton.onclick = () => editBike(index);
const deleteButton = document.createElement('button');
deleteButton.textContent = '刪除';
deleteButton.onclick = () => deleteBike(index);
li.appendChild(editButton);
li.appendChild(deleteButton);
bikeList.appendChild(li);
});
}
這個函式 renderBikes() 的作用是將 bikes 陣列中的所有公路車渲染到網頁上。
清空列表：每次渲染前，首先將 bikeList.innerHTML 設為空，確保列表不會重複顯示已經存在的項目。
遍歷陣列：使用 forEach 方法遍歷 bikes 陣列，對於每一個公路車，建立一個新的 <li> 元素，並將該公路車的資訊顯示出來。
添加按鈕：為每個 <li> 元素添加兩個按鈕，一個是 editButton 用於編輯，另一個是 deleteButton 用於刪除。這些按鈕的 onclick 事件會觸發對應的編輯或刪除功能。
顯示列表：將 <li> 元素（包含按鈕）添加到 bikeList 中。
function addBike(name, brand, year) {
bikes.push({ name, brand, year });
renderBikes();
}
addBike() 函式負責向 bikes 陣列中添加一個新公路車物件，然後重新渲染列表以顯示更新後的資料。
function editBike(index) {
const bike = bikes[index];
const newName = prompt('修改車型名稱:', bike.name);
const newBrand = prompt('修改品牌:', bike.brand);
const newYear = prompt('修改年份:', bike.year);
if (newName && newBrand && newYear) {
bikes[index] = { name: newName, brand: newBrand, year: newYear };
renderBikes();
}
}
function deleteBike(index) {
bikes.splice(index, 1);
renderBikes();
}
編輯公路車：editBike() 函式使用 prompt() 函式彈出對話框，讓用戶輸入新的車型名稱、品牌和年份。輸入完成後，更新 bikes 陣列中的對應項目，並重新渲染列表。
刪除公路車：deleteBike() 函式使用 splice() 方法從 bikes 陣列中刪除指定的公路車，然後重新渲染列表。
bikeForm.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('bike-name').value;
const brand = document.getElementById('bike-brand').value;
const year = document.getElementById('bike-year').value;
addBike(name, brand, year);
bikeForm.reset();
});
這段程式碼為表單的 submit 事件添加了一個監聽器：
阻止默認行為：event.preventDefault() 防止表單的默認提交行為（這通常會導致頁面重新加載）。
獲取表單數據：通過表單元素的 value 屬性獲取用戶輸入的車型名稱、品牌和年份。
添加公路車：調用 addBike() 函式將新公路車添加到列表中。
重置表單：bikeForm.reset() 清空表單欄位，讓用戶可以方便地輸入下一個公路車。
renderBikes();
最後，初次加載頁面時，執行 renderBikes() 以確保在頁面上顯示當前的公路車列表（即使最初列表是空的）。
這個JavaScript程式是一個簡單的CRUD（Create, Read, Update, Delete）應用範例，用戶可以在網頁上管理公路車的資料。你可以基於這個基礎進行擴展，例如加入數據持久化（例如使用localStorage），或增強使用者體驗。
iThome鐵人賽
看影片追技術